Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2

Selecciones


Objeto de D3.js que se comporta como una colección de elementos HTML.

Selecciones


Objeto de D3.js que se comporta como una colección de elementos HTML.



            d3.select()
          

            d3.selectAll()

d3.select 



            const seleccion = d3.select("p");
          

            const seleccion = d3.select(".importante");
          

            const seleccion = d3.select("#principal");

d3.select 



            const seleccion = d3.select("p");
          

<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>

d3.select 



            const seleccion = d3.select(".importante");
          

<body>
  <p>Soy un párrafo no importante.</p>
  <p class="importante">Yo si soy importante.</p>
  <p class="importante">Yo también soy importante.</p>
</body>

d3.select 



            const seleccion = d3.select("#principal");
          

<body>
  <h1>Soy un título.</h1>
  <p>Soy un párrafo.</p>
  <p id="principal">Pero yo soy el principal.</p>
</body>

d3.selectAll 



            const seleccion = d3.selectAll("p");
          

<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>

d3.selectAll 



            const seleccion = d3.selectAll(".importante");
          

<body>
  <p>Soy un párrafo no importante.</p>
  <p class="importante">Yo si soy importante.</p>
  <p class="importante">Yo también soy importante.</p>
</body>

d3.selectAll 



            const seleccion = d3.selectAll("#principal");
          

<body>
  <h1>Soy un título.</h1>
  <p>Soy un párrafo.</p>
  <p id="principal">Pero yo soy el principal.</p>
</body>

seleccion.attr 



            seleccion.attr(atributo, valor)

Antes:


<body>
  <p>Soy un párrafo.</p>
  <p>¡Yo también!</p>
  <p>¡Hey! ¡Yo igual!</p>
</body>
          


            const seleccion = d3.selectAll("p");
            seleccion.attr("class", "parrafo");

Después:


<body>
  <p class="parrafo">Soy un párrafo.</p>
  <p class="parrafo">¡Yo también!</p>
  <p class="parrafo">¡Hey! ¡Yo igual!</p>
</body>

seleccion.style 



            seleccion.style(propiedad, valor)

Antes:


<svg>
  <rect></rect>
  <rect></rect>
  <rect></rect>
</svg>
          


            const seleccion = d3.selectAll("rect");
            seleccion.style("fill", "red");

Después:


<svg>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
</svg>
          

<svg>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
  <rect style="fill: red"></rect>
</svg>

Es equivalente a:


            <svg>
              <rect fill="red"></rect>
              <rect fill="red"></rect>
              <rect fill="red"></rect>
            </svg>

Method chaining 



            const seleccion = d3.selectAll("rect");
            seleccion.attr("x", 10);
            seleccion.attr("y", 50);
            seleccion.style("fill", "red");

Equivalente a:


            d3.selectAll("rect")
              .attr("x", 10)
              .attr("y", 50)
              .style("fill", "red");

Constantes o funciones 



            d3.selectAll("rect")
              .attr("x", 10);
          

            d3.selectAll("rect")
              .attr("x", () => 10);

Constantes o funciones 



            d3.selectAll("rect")
              .attr("x", (d, i, all) => 100 * i);
          

<svg>
  <rect x="0"></rect>
  <rect x="100"></rect>
  <rect x="200"></rect>
</svg>

seleccion.append 



            seleccion.append(tipo)

Antes:


<body>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</body>
          


            d3.selectAll("ul")
              .append("li");

Después:


<body>
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
</body>

Antes:


<body>
  <ul></ul>
  <ul></ul>
  <ul></ul>
</body>
          


            d3.selectAll("ul")
              .append("li")
              .text("Primer ítem");

Después:


<body>
  <ul>
    <li>Primer ítem</li>
  </ul>
  <ul>
    <li>Primer ítem</li>
  </ul>
  <ul>
    <li>Primer ítem</li>
  </ul>
</body>
          

            const seleccionDeListas = d3.selectAll("ul");
            
            seleccionDeListas.append("li")
              .style("color", "red")
              .text("Primer ítem");

            seleccionDeListas.append("li")
              .style("color", "green")
              .text("Segundo ítem");
          

<body>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
  <ul>
    <li style="color: red">Primer ítem</li>
    <li style="color: green">Segundo ítem</li>
  </ul>
</body>

Selecciones en D3.js I

Selecciones y join de datos en D3.js

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!